<template>
	<div class="change-password">
		<xndj-header title="修改密码"></xndj-header>
		<div class="info">
			<p>您要修改对应的卡号是</p>
			<h3>88000014478</h3>
		</div>
		<div class="content">
			<mt-field label="原密码" placeholder="请输入原密码" type="password">
				<div class="show">
					<img src="../assets/img/icons/eye.png" alt="">
				</div>
			</mt-field>
			<mt-field label="新密码" placeholder="请输入6位数字密码" type="password"></mt-field>
			<mt-field label="确认密码" placeholder="请输入6位数字密码" type="password"></mt-field>
		
		</div>
		<button>立即修改</button>
		<div class="text">
			<h2>修改说明</h2>
			<div class="item">
				<h4>1. 修改会员卡密码需要满足什么条件？</h4>
				<p>该会员卡已经设置了密码。</p>
			</div>
				<div class="item">
				<h4>2. 如果会员卡未设置密码，是否能修改密码？</h4>
				<p>需到商家实体门店进行密码设置，设置好密码后再去修改密码。</p>
			</div>
			<div class="tips">
				<span>*</span>如有疑问,请咨询商家获得修改会员卡密码的详细事宜。
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name:'change-password'

}
</script>
<style lang="scss" scoped>
@import "../assets/scss/lib/index.scss";
.change-password{
	.info{
		display: flex;align-items: center;
		flex-direction: column;
		padding: $offset 0;
		p{
			color: color(gray);
			font-size: 24px;
		}
		h3{
			padding:$offset;
			font-size: 40px;
		}
	
	}
	.content{
		.show{
			border-left: 1px solid color(bc);
			height: 90px;
			width: 100px;
			display: flex;
			align-items: center;
			justify-content: center;
			img{
				width: 40px;
			}
		}
	}
	button{
		@include button();
	}
	.text{
		padding: 0 $offset;
		h2{
			margin-bottom: $offset;
			font-size: 30px;
		}
		.item{
				margin-bottom: $offset;
				color: color(gray);
		}
		.tips{
			color: color(gray);
			span{
				color: color(green);
				font-size: 2em;
				vertical-align: middle;
			}
		}
	}
}
</style>